<template>
  <div class="a">
    <el-container>
    <el-header>课程管理系统</el-header>
    <el-main>
      <el-form :model="loginForm" :rules="rules" ref="loginForm" label-width="80px" class="login-form">
        <el-form-item  label="账号" prop="username">
          <el-input v-model="loginForm.username" placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="loginForm.password" placeholder="请输入密码" show-password></el-input>
        </el-form-item>
        <el-form-item label="身份" prop="role">
          <el-radio-group v-model="loginForm.role">
            <el-radio label="教师">教师</el-radio>
            <el-radio label="教务管理员">教务管理员</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">登录</el-button>
        </el-form-item>
      </el-form>
    </el-main>
  </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loginForm: {
        username: '',
        password: '',
        role: ''
      },
      rules: {
        username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        role: [{ required: true, message: '请选择身份', trigger: 'change' }]
      }
    }
  },
  methods: {
    onSubmit() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          // 登录逻辑
          this.$message.success('登录成功！');
        } else {
          this.$message.error('请完整填写表单');
          return false;
        }
      });
    }
  }
}
</script>

<style>
.a{
   width: 700x;
   height: 460px;
   margin-top: 70px;
}
.el-header {
    width: 400px;
    margin-top: 50px;
    background-color: #5E5E60;
    color: #ffffff;
    text-align: center;
    margin-left: 34%;
    line-height: 60px;
    color: white;
}

.el-main {
    margin-top: 1px;
    width: 400px;
    height: 500px;
    overflow: hidden;
    background-color: #5E5E60;
    color: #ffffff;
    text-align: center;
    margin-left: 34%;
    padding: 40px 0;
}

.login-form {
    background: #5E5E60;
    padding: 30px 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
}
.el-button{
    width: 250px;
    
}
.el-form-item{
    margin-right: 50px;
}
/* ...existing code... */
.login-form,
.login-form * {
  color: #fff !important;
}

/* 输入框内容和placeholder都为白色 */
.el-input__inner {
  color: #fff !important;
  /* background-color: #5E5E60; */
  border-color: #fff;
}
.el-input__inner::placeholder {
  color: #fff !important;
  opacity: 1;
}

/* 单选框文字为白色 */
.el-radio__label {
  color: #fff !important;
}

/* 表单标签为白色 */
.el-form-item__label {
  color: #fff !important;
}

/* 按钮文字为白色 */
.el-button {
  color: #fff !important;
}
</style>